<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <title>Find</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript">
        </script>
        <script type="text/javascript">
            document.write('<script type="text/javascript" src="../src/arcgislink' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
        </script>
        <script type="text/javascript">
            var gmap = null;
            var service = null;
            var results=[];
            function init() {
              var tiled = new ArcGISTileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer');
              GEvent.addListener(tiled, 'load', function() {
              
                gmap = new GMap2(document.getElementById("map"), {
                  mapTypes: [new ArcGISMapType([tiled])]
                });
                gmap.setCenter(new GLatLng(40, -100), 4);
                gmap.addControl(new GLargeMapControl());
                gmap.addControl(new GMapTypeControl());
                gmap.enableScrollWheelZoom();
                service = new ArcGISMapService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
                GEvent.addListener(service, 'load', function(){
                  document.getElementById('find').disabled=false;
                  //gmap.addOverlay(dyna);
                });
              });
              GEvent.addListener(ArcGISUtil,'jsonpstart', function(){
                document.getElementById('busy').style.visibility='visible';
              })
              GEvent.addListener(ArcGISUtil,'jsonpend', function(){
                document.getElementById('busy').style.visibility='hidden';
              })
            }
            function find(q) {
              gmap.removeOverlays(results);
              gmap.closeInfoWindow();
              results.length=0;
              document.getElementById('results').innerHTML='';
              
              var exact=document.getElementById('exact').checked;
              var params = {
                returnGeometry: true,
                searchText: q,
                contains:!exact,
                layers:['Cities','Rivers','States'],//
                searchFields:["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"],
                sr: 4326
              };
              service.find(params, processFindResults);
            }
            
            function processFindResults(rs) {
              var fs = rs.results;
              for (var i = 0, c = fs.length; i < c; i++) {
                processFindResult(fs[i]);
              }
            }
            
           
            function processFindResult(res) {
              var ovs = ArcGISUtil.fromFeatureToOverlays(res);
              var a = res.attributes;
              var title=res.layerName+':'+res.foundFieldName+' = '+res.value+'<br/>';
              var html = '<div style="width:300px;height:240px;overflow:auto">';
              html+='<b>'+title+'</b>';
              for (var x in a){
                if (a.hasOwnProperty(x)){
                  html+=x+': '+a[x]+'<br/>';
                }
              }
              html+='</div>';
              for (var j = 0, jc = ovs.length; j < jc; j++) {
                var ov = ovs[j];
                GEvent.addListener(ov, 'click', function() {
                  var latlng = ov.getLatLng?ov.getLatLng(): ov.getBounds().getCenter();
                  gmap.openInfoWindowHtml(latlng, html);
                });
                results.push(ov);
              }
              gmap.addOverlays(ovs);
              var side=document.getElementById('results');
              var row='<div onclick="highlight('+(results.length-1)+')" onmouseover="this.style.backgroundColor=\'#AAAAEE\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'">'+title+'</div>'
              side.innerHTML+=row;
            }
            function highlight(i){
              var ov=results[i];
              if (ov){
                GEvent.trigger(ov,'click');
              }
            }
        </script>
    </head>
    <body onload='init()' onunload='GUnload()'>
        <a href='../docs/examples.html'>More examples</a>
        | Use <a href='?packed'> Packed </a>
        | <a href='?'> Unpacked</a>
        Version of the script.
        <br/>
        <div>
           Search a State or City with name containing text:
            <input id='q' type='text' size='20' value='KS'/>
            <input id='find' type='button' disabled="true" value='Find' onclick='find(document.getElementById("q").value)'/>
        <input id='exact' type='checkbox'>Exact match
         <div id='busy' style="color:red">Running....</div>
        </div>
        <div id="map" style="position:absolute;width:700px; height:600px; left:0px; top: 80px;border:1px solid #000;">
        </div>
        <div id="results" style="position:absolute; overflow:auto;left:720px; top:80px; width:300px; height:600px; border:1px solid #000;">
        </div>
       
    </body>
</html>
